<template>
	<view class="" style="margin-top: 20rpx">
		<uni-section title="智能模型" type="line"></uni-section>
		<template v-for="item in list" :key="item.modeId">
			<uni-card :title="item.desc">
				<view class="item_body">
					<view class="item_body_row">
						模型类型：
						<span>{{ item.modeName }}</span>
					</view>
					<view class="item_body_row">
						对话次数：
						<span>{{ item.tokenCount }}</span>
					</view>
					<view class="item_body_row">
						价格：
						<span>{{ item.price }}元</span>
					</view>
				</view>

				<view class="_goubai">
					<view class="" style="flex: 1"></view>
					<view class="_baibottom" @click="toOrder(item)">购买套餐</view>
				</view>
			</uni-card>
		</template>
		<Empty v-if="list.length == 0"></Empty>
	</view>
</template>

<script setup>
import { uniCommon, uniRouter } from '../../utils';
import { onMounted, ref } from 'vue';
import { orderList } from '../../api';
import Empty from "../../components/Empty.vue"
import { onLoad } from '@dcloudio/uni-app';
let list = ref([]);
onLoad(() => {
	getOrerList();
});
async function getOrerList() {
	try {
		let res = await orderList();
		if (res.code == 200) {
			list.value = res.data || [];
		}
	} catch (err) {}

	// list.value
}
function toOrder(item) {
	let objJSON = uniCommon.objectToJson(item);
	uniRouter.push('/pages/order/order?obj=' + objJSON);
}
</script>

<style lang="scss">
page {
	background: #f1f1f1;
}
::v-deep .uni-card {
	background: #dbe1f9 !important;
}
.item_body {
	background: #fff;
	border-radius: 10rpx;
	padding: 0 20rpx;
	margin-bottom: 20rpx;
	.item_body_row {
		border-bottom: solid 1px #f1f1f1;
		line-height: 80rpx;
	}
	.item_body_row:nth-last-child(1) {
		border-bottom: none;
	}
}
._goubai {
	display: flex;
	align-items: flex-end;

	width: 100%;
	._baibottom {
		border-radius: 10rpx;
		background: yellow;
		color: #333;
		padding: 10rpx 30rpx;
		font-size: 28rpx;
	}
}
</style>